<template>
  <div class="con-box">
    <div class="box-tit">{{$t('freeShop.freeShop')}}</div>
    <div :class="['box-content','free-shop',this.$store.state.locale == 'en'?'en':'']">
      <div :class="['item',shopNameTSAvisible?'item error':'']">
        <div class="tit">
          <span class="asterisk">*</span>{{$t('freeShop.storeName')}}：
        </div>
        <input
          type="text"
          v-model="shopName"
          maxlength="20"
          show-word-limit
          class="text"
          :disabled="applyVisible"
          :placeholder="$t('freeShop.storeNameTips1')"
        />
        <div class="error-text" v-if="shopNameTSAvisible">{{$t('freeShop.storeNameTips2')}}</div>
      </div>
      <div :class="['item',telAvisable?'item error':'']">
        <div class="tit">
          <span class="asterisk">*</span>{{$t('freeShop.contactNumber')}}：
        </div>
        <input
          type="text"
          v-model="tel"
          class="text"
          oninput="value=value.replace(/[^\d]/g,'')"
          :disabled="applyVisible"
          :placeholder="$t('freeShop.contactNumberTips1')"
        />
        <div class="error-text" v-if="telAvisable">{{$t('freeShop.contactNumberTips2')}}</div>
      </div>
      <div class="item item error">
        <div class="tit">
          <span class="asterisk">*</span>{{$t('freeShop.area')}}：
        </div>
        <div class="area-box">
          <!-- 省 -->
          <el-select
            v-model="addressForm.province"
            prop="province"
            :placeholder="$t('freeShop.pleaseSelect')"
            class="area freeshop-area"
            @change="selectProvince"
            :disabled="applyVisible"
          >
            <el-option
              v-for="province in provinceList"
              :key="province.areaId"
              :label="province.areaName"
              :value="province"
              :disabled="applyVisible"
            >{{ province.areaName }}</el-option>
          </el-select>
          <!-- 市 -->
          <el-select
            v-model="addressForm.city"
            prop="city"
            class="area freeshop-area"
            @change="selectCity"
            :disabled="applyVisible"
          >
            <el-option
              v-for="city in cityList"
              :key="city.areaId"
              :label="city.areaName"
              :value="city"
            >{{ city.areaName }}</el-option>
          </el-select>
          <!-- 区 -->
          <el-select
            v-model="addressForm.area"
            class="area freeshop-area"
            prop="area"
            @change="selectArea"
            :disabled="applyVisible"
          >
            <el-option
              v-for="area in areaList"
              :key="area.areaId"
              :label="area.areaName"
              :value="area"
            >{{ area.areaName }}</el-option>
          </el-select>
        </div>
        <div class="error-text" v-if="detAvisable">{{$t('freeShop.selectArea')}}</div>
        <!-- <div class="area">请选择</div>
        <div class="area">请选择</div>
        <div class="area">请选择</div>-->
      </div>
      <div :class="['item',shopAddressAvisiable?'item error':'']">
        <div class="tit">
          <span class="asterisk">*</span>{{$t('freeShop.detailedAddress')}}：
        </div>
        <input
          type="text"
          @blur="changeArea"
          v-model="shopAddress"
          class="text"
          :disabled="applyVisible"
        />
        <!-- <a
          href="javascript:void(0)"
          class="freeshop-btn btn"
          @click="changeArea"
          v-if="!shopAddressAvisiable"
        >定位地址</a>
        <div class="error-text" v-if="shopAddressAvisiable">详细地址不能为空</div>-->
        <div class="error-text" v-if="shopAddressAvisiable">{{$t('freeShop.detailedAddressTips')}}</div>
      </div>
      <!-- avisableLogo&&businessLicenseAvisable&&identityCardLaterAvisiable&&identityCardLaterAvisiable -->
      <!-- 地图 -->
      <div :class="['item',introAvisable?'item error':'']">
        <div class="tit">
          <span class="asterisk">*</span>{{$t('freeShop.locationMap')}}：
        </div>
        <baidu-map
          ak="S95UIiWMzDtSHNmlU6vGY5eSTiKDSVtm"
          class="map"
          :scroll-wheel-zoom="false"
          :center="center"
          @moving="syncCenterAndZoom"
          @moveend="syncCenterAndZoom"
          @zoomend="syncCenterAndZoom"
          :zoom="zoom"
        >
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
          <bm-marker :position="center" :dragging="false" @click="infoWindowOpen">
            <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">{{$t('freeShop.storeLocation')}}</bm-info-window>
          </bm-marker>
        </baidu-map>
      </div>
      <!-- 地图 -->
      <div :class="['item',introAvisable?'item error':'']">
        <div class="tit">
          <span class="asterisk">*</span>{{$t('freeShop.storeDescription')}}：
        </div>
        <textarea class="shop-description" v-model="intro" :disabled="applyVisible" maxlength="200" :placeholder="$t('freeShop.storeDescriptionTips2')"></textarea>
        <div class="error-text" v-if="introAvisable">{{$t('freeShop.storeDescriptionTips2')}}</div>
      </div>
      <div :class="['item',avisable?'item error':'']">
        <div class="tit">
          <span class="asterisk">*</span>{{$t('freeShop.uploadInformation')}}：
        </div>
        <div class="img">
          <!-- <a href="javascript:void(0)"
               class="file-img">+</a>
          <span class="img-text">店铺logo</span>-->
          <pic-upload class="file-img" v-model="shopLogo" :disabled="applyVisible"></pic-upload>
          <span class="img-text">{{$t('freeShop.storeLogo')}}</span>
        </div>
        <div class="img">
          <pic-upload class="file-img" v-model="businessLicense" :disabled="applyVisible"></pic-upload>
          <span class="img-text">{{$t('freeShop.businessLicense')}}</span>
        </div>
        <div class="img">
          <pic-upload class="file-img" v-model="identityCardFront" :disabled="applyVisible"></pic-upload>
          <span class="img-text">{{$t('freeShop.frontCard')}}</span>
        </div>
        <div class="img">
          <pic-upload class="file-img" v-model="identityCardLater" :disabled="applyVisible"></pic-upload>
          <span class="img-text">{{$t('freeShop.reverseCard')}}</span>
        </div>
        <div class="error-text" v-if="avisableLogo">{{$t('freeShop.uploadInformationTips1')}}</div>
        <div class="error-text" v-if="businessLicenseAvisable">{{$t('freeShop.uploadInformationTips2')}}</div>
        <div class="error-text" v-if="identityCardFrontAvisable">{{$t('freeShop.uploadInformationTips3')}}</div>
        <div class="error-text" v-if="identityCardLaterAvisiable">{{$t('freeShop.uploadInformationTips4')}}</div>
      </div>
      <div class="item" v-if="!applyVisible">
        <div class="tit">&nbsp;</div>
        <a href="javascript:void(0)" class="btn" @click="submitApply">{{$t('freeShop.submitApplication')}}</a>
      </div>
      <div class="item" v-else>
        <div class="tit">&nbsp;</div>
        <a href="javascript:void(0)" class="btn" @click="applyVisible=false">{{$t('freeShop.modifyInformation')}}</a>
      </div>
    </div>
    <!-- 提示店铺审核未通过弹窗 -->
    <el-dialog :title="$t('tips')" :visible.sync="dialogVisible" :before-close="confirm" width="30%">
      <div>{{$t('freeShop.submitApplicationTips')}}</div>
      <br>
      <div>{{$t('freeShop.auditRemarks')}}：{{shopAuditInfo.remarks?shopAuditInfo.remarks:$t('freeShop.none')}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="historyBack()">{{$t('freeShop.cancel')}}</el-button>
        <el-button type="primary" @click="confirm()">{{$t('freeShop.ok')}}</el-button>
      </span>
    </el-dialog>
    <!-- /提示店铺审核未通过弹窗 -->
  </div>
</template>

<script>
import PicUpload from '~/components/pic-upload'
import AddOrEditAddress from '~/components/add-or-edit-address'
import Cookie from 'js-cookie'
import { picDomain } from '~/plugins/config.js'
import { _throttle} from "~/plugins/util";   //防抖和验证
// checkPhoneNumber,checkShopName
export default {
  data () {
    return {
      shopAuditStatus: this.$route.query.shopAuditStatus,  //店铺状态
      dialogVisible: false,  //店铺未通过审核弹窗显隐
      isUpload: false,
      center: {
        lng: 113.327955,
        lat: 23.136783
      },
      imgPath: 'http://img-test.gz-yami.com/',
      zoom: 18,
      show: false,
      value: false,
      auth: {},
      shopNameTSAvisible: false,  //
      page: {
        current: 1,
        size: 8,
        total: 0
      },
      applyVisible: false, // 如果有参数则禁止编辑
      // 申请开店参数
      shopName: '',
      tel: null,  // 电话号码
      telAvisable: false,
      detAvisable: false,
      shopAddress: null, // 详细地址
      shopAddressAvisiable: false,
      intro: null,  // 店铺描述
      introAvisable: false,
      avisable: false,
      shopLogo: '', // 店铺logo
      avisableLogo: false,
      businessLicense: '', // 营业执照
      businessLicenseAvisable: false,
      identityCardFront: null,  // 身份证正面
      identityCardFrontAvisable: false,
      identityCardLater: null,  // 身份证反面
      identityCardLaterAvisiable: false,
      shopDetailParam: {
        // area: null,
        // areaId: 0,
        // businessLicense: null,
        // city: null,
        // cityId: 0,
        // identityCardFront: null,
        // identityCardLater: null,
        // intro: null,
        // province: null,
        // provinceId: 0,
        // shopAddress: null,
        // shopLat: null,
        // shopLng: null,
        // shopLogo: null,
        // shopName: null,
        // shopPhotos: null,
        // tel: null
      },
      provinceList: [],
      cityList: [],
      areaList: [],
      addressForm: {
        addr: '', // 详细地址
        addrId: 0, // 地址ID
        province: '',
        provinceId: null,
        postCode: '',
        city: '',
        cityId: null,
        area: '',
        areaId: null
      },
      shopAuditInfo: {  // 店铺审核信息
        auditorId: 0,
        createTime: "",
        remarks: "",
        shopAuditingId: 0,
        shopId: 0,
        status: 0,
        updateTime: "",
        userId: ""
      }
    }
  },
  components: {
    PicUpload,
    AddOrEditAddress
  },
  created () {

  },
  mounted () {
    // 设置网页标题
    document.title = this.$i18n.t('freeShop.freeShop')
    this.init()
    this.auth = { Authorization: Cookie.get('token') }
  },
  methods: {
    // 页面加载获取数据:省份数据
    init () {
      this.listAreaByParentId().then(({ data }) => {
        this.provinceList = data
      })
      this.getMyShopInfo()  //获取我的店铺申请信息
      this.getShopAudit()  //获取店铺审核数据
    },
    /**
     * 取消
     */
    historyBack () {
      this.dialogVisible = false
      this.applyVisible = true  //禁用输入框
      // history.back()
      this.getMyShopInfo()
    },
    /**
     * 确定(未通过状态下点击确定)
     */
    confirm () {
      this.dialogVisible = false
      this.applyVisible = false
      this.getMyShopInfo()
    },

    /**
     * 获取我的店铺数据
     */
    getMyShopInfo () {
      this.$axios.get('/p/shop').then(({ data }) => {
        if (data) {
          // this.applyVisible = false
          this.shopDetailParam = data
          this.shopName = data.shopName,
            this.tel = data.tel,
            this.addressForm.province = data.province,
            this.addressForm.provinceId = data.provinceId,
            this.addressForm.city = data.city,
            this.addressForm.cityId = data.cityId,
            this.addressForm.area = data.area,
            this.addressForm.areaId = data.areaId,
            this.shopAddress = data.shopAddress,
            this.intro = data.intro,
            this.shopLogo = data.shopLogo,  //picDomain图片的头，如果返回的数据没有，就加上
            this.businessLicense = data.businessLicense,
            this.identityCardFront = data.identityCardFront,
            this.identityCardLater = data.identityCardLater,
            this.center.lng = data.lng?data.lng:this.center.lng,
            this.center.lat = data.lat?data.lat:this.center.lat
        } else {
          this.getShopAudit()
        }
        // if(data && !this.applyVisible) {
        //   this.shopAddress = ''
        // }
      })
    },
    /**
     * 获取店铺的审核信息
     */
    getShopAudit () {
      this.$axios.get('/p/shop/shopAudit').then(({ data }) => {
        this.shopAuditInfo = data
        if (data.status == -1) {  //审核不通过
          this.dialogVisible = true
        }else if(data.status == 0) {  //未审核
          this.applyVisible = true  //禁用输入框
          this.$alert(this.$i18n.t('freeShop.applicationTips'), this.$i18n.t('tips'), {
            confirmButtonText: this.$i18n.t('determine'),
          });
        }
      })
    },
    /**
     * 接收地图移动后返回数据
     */
    syncCenterAndZoom (e) {
      this.setcenter()
      const { lng, lat } = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    },
    /**
     * 初始化地图的参数
     */
    setcenter () {
      this.center = null
      this.center = {
        lng: 113.327955,
        lat: 23.136783
      }
      this.zoom = 18
    },
    /**
     * 点击地图标点关闭提示框
     */
    infoWindowClose () {
      this.show = false
    },
    /**
     * 点击地图标点弹出提示框
     */
    infoWindowOpen () {
      this.show = true
    },
    /**
     * 提交开店申请
     */
    submitApply () {
      // 初始化错误标识
      this.shopNameTSAvisible = false
      this.telAvisable = false
      this.detAvisable = false
      this.shopAddressAvisiable = false
      this.introAvisable = false
      this.avisable = false
      this.avisableLogo = false
      this.businessLicenseAvisable = false
      this.identityCardFrontAvisable = false
      this.identityCardLaterAvisiable = false

      if (this.shopName === '' || /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/im.test(this.shopName)) { // 店铺名称
        this.shopNameTSAvisible = true
        return
      }
      if (this.tel === null || !(/^[1]([3-9])[0-9]{9}$/.test(this.tel))) { // 电话号码
        this.telAvisable = true
        return
      }
      if (this.addressForm.province === null || this.addressForm.province === '') { // 省
        this.detAvisable = true
        return
      }
      if (this.addressForm.city === null || this.addressForm.city === '') { // 市
        this.detAvisable = true
        return
      }
      if (this.addressForm.area === null || this.addressForm.area === '') { // 区
        this.detAvisable = true
        return
      }
      if (this.shopAddress === null || this.shopAddress === '' || this.shopAddress.length < 5) { // 详细地址
        this.shopAddressAvisiable = true
        return
      }
      if (this.intro === null || this.intro === '' || this.intro.length < 10) { // 店铺描述
        this.introAvisable = true
        return
      }
      if (this.shopLogo === null || this.shopLogo === '') { // 店铺logo
        this.avisable = true
        this.avisableLogo = true
        return
      }
      if (this.businessLicense === null || this.businessLicense === '') { // 营业执照
        this.avisable = true
        this.businessLicenseAvisable = true
        return
      }
      if (this.identityCardFront === null || this.identityCardFront === '') { // 身份证正面
        this.avisable = true
        this.identityCardFrontAvisable = true
        return
      }
      if (this.identityCardLater === null || this.identityCardLater === '') { // 身份证反面
        this.avisable = true
        this.identityCardLaterAvisiable = true
        return
      }

      let dataFrom = {
        shopName: this.shopName,
        tel: this.tel,
        province: this.addressForm.province,
        provinceId: this.addressForm.provinceId,
        city: this.addressForm.city,
        cityId: this.addressForm.cityId,
        area: this.addressForm.area,
        areaId: this.addressForm.areaId,
        shopAddress: this.shopAddress,
        intro: this.intro,
        shopLogo: this.shopLogo.replace(this.imgPath,''),
        businessLicense: this.businessLicense.replace(this.imgPath,''),
        identityCardFront: this.identityCardFront.replace(this.imgPath,''),
        identityCardLater: this.identityCardLater.replace(this.imgPath,''),
        shopLng: this.center.lng,
        shopLat: this.center.lat
      }

      this.$axios.post('/p/shop/apply', dataFrom).then(({ data }) => {
        this.shopDetailParam = data
        this.$message({
          message: this.$i18n.t('freeShop.applicationSuccessfully'),
          type: 'success',
          duration: 1500,
        });
        setTimeout(() => {
          this.toUserCenter()
        },1500)
      })
    },
    /**
     * 跳转个人中心
     */
    toUserCenter (orderNumber) {
      this.$router.push({ path: '/user-center' })
    },
    /**
     * 省市区
     */
    listAreaByParentId (pid) {
      if (!pid) { pid = 0 }
      return this.$axios.get('/p/area/listByPid', { params: { pid } })
    },
    /**
     * 选择省
     */
    selectProvince (val) {
      // 设置省id
      this.addressForm.provinceId = val.areaId
      this.addressForm.province = val.areaName
      // 将市和区的值清除
      this.addressForm.cityId = null
      this.addressForm.city = ''
      this.addressForm.areaId = null
      this.addressForm.area = ''
      // 获取城市的select
      this.listAreaByParentId(this.addressForm.provinceId).then(({ data }) => {
        this.cityList = data
      })
    },
    /**
     * 选择市
     */
    selectCity (val) {
      // 设置市id
      this.addressForm.cityId = val.areaId
      this.addressForm.city = val.areaName
      // 将区域的值清除
      this.addressForm.areaId = null
      this.addressForm.area = ''
      // 获取区域的select
      this.listAreaByParentId(this.addressForm.cityId).then(({ data }) => {
        this.areaList = data
      })
    },
    /**
     * 选择区
     */
    selectArea (val) {
      // 设置区id
      this.addressForm.areaId = val.areaId
      this.addressForm.area = val.areaName
    },
    // 定位地图
    changeArea: _throttle(function () {
      console.log(this.shopAddress)
      this.center = null
      if (!this.addressForm.area && this.shopAddress) {
        this.$message({
          message: this.$i18n.t('freeShop.selectProvince'),
          type: 'error',
          duration: 1000
        })
        return
      }
      // if (!this.shopAddress) {
      //   this.$message({
      //     message: '请输入详细地址',
      //     type: 'error',
      //     duration: 1000
      //   })
      //   return
      // }
      this.center = this.addressForm.province + this.addressForm.city + this.addressForm.area + this.shopAddress
      console.log(this.center)
    }, 1000)
  },
  watch: {
    shopName () {
      if (this.shopName.length > 1) {
        this.shopNameTSAvisible = false
      }
    },
    tel () {
      if (this.tel.length > 8) {
        this.telAvisable = false
      }
    },
    shopAddress () {
      if (this.shopAddress.length > 3) {
        this.shopAddressAvisiable = false
      }
    },
    intro () {
      if (this.intro.length > 5) {
        this.introAvisable = false
      }
    },
    shopLogo () {
      if (this.shopLogo.length > 3) {
        this.avisableLogo = false
      }
    },
    businessLicense () {
      if (this.businessLicense.length > 3) {
        this.businessLicenseAvisable = false
      }
    },
    identityCardFront () {
      if (this.identityCardFront.length > 3) {
        this.identityCardFrontAvisable = false
      }
    },
    identityCardLater () {
      if (this.identityCardLater.length > 3) {
        this.identityCardLaterAvisiable = false
      }
    }

  }
}
</script>

<style scoped src='~/assets/css/uc-edit.css'></style>
<style scoped src='~/assets/css/user-center.css'></style>
<style>
.freeshop-area.area {
  margin-right: 9px !important;
}
.freeshop-area.area .el-input__inner {
  margin: 0;
  padding: 0;
  height: unset;
  line-height: unset;
}

.el-select > .el-input,
.el-select-dropdown__item,
.el-select-dropdown__empty {
  font-size: 12px;
}

.freeshop-area.area .el-scrollbar {
  width: 97px;
}
.freeshop-area.area .el-input__suffix-inner {
  position: absolute;
  top: -5px;
  left: -3px;
}
.freeshop-area.area .el-select-dropdown {
  z-index: 20005 !important;
  left: 388px !important;
}
.freeshop-area.area .el-select-dropdown__item.selected {
  color: unset;
  font-weight: unset;
}
.freeshop-area.area::before {
  display: none !important;
}
.freeshop-btn.btn {
  padding: 0 !important;
  margin-left: 20px;
  background: #fff !important;
  color: #005ea7 !important;
}
.map {
  width: 800px;
  height: 300px;
}
</style>
